<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap/js/bootstrap.min.js"></script>
		<script src="/js/plugins/jrender/jrender.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="/css/reset.css">
		<link rel="stylesheet" href="/css/userProfiles.css">
		<link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
		<script src="/js/plugins/dialog/dialog.min.js"></script>
		<!--<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
		<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>-->
		<script src="/js/common.js"></script>
	</head>
	<body>
	<script>
        var user = JSON.parse(sessionStorage.getItem("user"));
		$(function () {
			//个人页面回显
			//获取当前滚动点评作者id
			var id = getParams().id;
			//发送ajax请求,查出个人信息
			$.get("/users",{id:1},function (data) {
                console.log(data);
                $(".bg").css("background-image", "url('"+data.coverImgUrl+"')");
                $(".info").renderValues(data);
            })
			$.get("/users/1/travels",{authorId:1},function (data) {
                console.log(data);
                $("#travels-tab span").html(data.size);
                $("#travels").renderValues(data,{
                    handle:function (ele,value) {
						ele.href="/travelContent.html?id="+value;
                    },
                    handleLike: function (ele, value) {
                        $(ele).attr("data-rid", value);
                        //  给每个span设置标志
                        $(ele).find("span").attr("data-pid", value);
                    $.get("/praises/" + value, {type: 2}, function (data) {
                        // 通过标志给每个span设置属性
						if (!data){
						    data=0;
						}

                        $("span[data-pid=" + value + "]").html(data);

                    });
                    //判断我们之前是否有点赞
                    if (user) {
                        // 获取当前用户的状态值做回显
                        $.get("/praises",
                            {userId: user.id, typeId: value, type: 2},
                            function (data) {
                                var p = data.data;
                                $("[data-rid=" + value + "]").removeClass();
                                if (p) {
                                    if (p.state == 1) {
                                        $("[data-rid=" + value + "]").addClass("fa fa-thumbs-up");
                                    } else {
                                        $("[data-rid=" + value + "]").addClass("fa fa-thumbs-o-up");

                                    }
                                }
                            }
                        );
                    }

                }
				});
            })



            $("#pills-tabContent").on("click","[name=pp]",function () {
                if (!user) {
                    $(document).dialog({
                        type: "confirm",
                        style: "IOS",
                        titleShow: false,
                        content: "请登录",
                        buttons: [{
                            name: "跳转到登录界面",
                            callback: function () {
                                location.href = "/login.html";
                            }
                        }]
                    });
                    return;
                }
                var rid = $(this).data("rid")
                //先去查询是否已经有了这个对应的赞
                $.get("/praises",{userId: user.id, typeId: rid, type: 2},function (data) {
                    if (data.success){
                        //只是修改操作
                        if (data.data.state==1){
                            $.ajax({
                                url:"/praises",
                                type:"PUT",
                                data:{userId: user.id, typeId: rid, type: 2, state: 0},
                                success:function () {
                                    $("[data-rid=" + rid + "]").attr("class","fa fa-thumbs-o-up");
                                    var num = parseInt($("span[data-pid=" + rid + "]").html())
                                    $("span[data-pid=" + rid + "]").html(num-1);
                                }
                            })
                        }else {
                            $.ajax({
                                url:"/praises",
                                type:"PUT",
                                data:{userId: user.id, typeId: rid, type: 2, state: 1},
                                success:function () {
                                    $("[data-rid=" + rid + "]").attr("class","fa fa-thumbs-up");
                                    var num = parseInt($("span[data-pid=" + rid + "]").html())
                                    $("span[data-pid=" + rid + "]").html(num+1);
                                }
                            })
                        }
                    } else {
                        //新增操作
                        $.post("/praises",{userId: user.id, typeId: rid, type: 2, state: 1},function (data) {
                            $("[data-rid=" + rid + "]").attr("class","fa fa-thumbs-up");
                            var num = parseInt($("span[data-pid=" + rid + "]").html())
                            $("span[data-pid=" + rid + "]").html(num+1);
                        })
                    }
                })
            })

        });
	</script>
		<div class="container bg" style="background-image: url(&quot;/img/user/bg.jpeg&quot;);">
			<a href="javascript:window.history.go(-1)" class="my-arrow">
				<span><i class="fa fa-chevron-left fa-2x"></i></span>
			</a>
			<div class="container">
				<div class="info">
					<img class="rounded-circle" width="17%" render-src="headImgUrl">
					<p class="name" render-html="nickName"></p>
					<p render-html="sign"></p>

					<div class="row num">
						<div class="col-2 border border-left-0 border-top-0 border-bottom-0">
							<div>
								<span >1</span>
							</div>
							<div>
								<span>关注</span>
							</div>
						</div>
						<div class="col-2">
							<div>
								<span>0</span>
									</div>
							<div>
								<span>粉丝</span>
							</div>
						</div>
						<div class="col">
							<button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
							<button class="btn btn-success ibtn" id="followBtn">关注</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="tabs">
			<ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
						TA的游记[<span id="sp1">1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
						TA的点评[<span id="totalComment"></span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
						TA的旅行单[<span>0</span>]
					</a>
				</li>
			</ul>
			<div class="container tab-content" id="pills-tabContent">
				<div class="tab-pane fade show active" id="travels">
						
						<dl class="list" render-loop="list">
							<dd>
								<a href="travelContent.html" data-id="2" render-key="list.id" render-fun="handle">
									<img  render-src="list.coverUrl">
									<p><span class="title" render-html="list.title">入住长隆熊猫酒店，天天都是儿童节</span>
								</a>
								<hr>
										<span class="span-right">
											<i class="fa fa-thumbs-o-up" name="pp" render-key="list.id" render-fun="handleLike">
												<span>0</span>
											</i></span>
									</p>
							</dd>
						</dl>
				</div>

				<div class="comment tab-pane fade " id="comments">
					<input type="hidden" name="currentPage" value="1">
					<input type="hidden" name="pageSize" value="5">
					<input type="hidden" name="rows" value="1">
					<div id="comment">
						<div  render-loop="list">
							<div class="container row comment" >
								<div class="col-2 comment-head">
									<a href="userProfiles.html" render-key="list.userId" render-fun="handleUserProfiles">
										<img class="rounded-circle"
											 render-src="list.uheadImgUrl">
									</a>
								</div>
								<div class="col comment-right">
									<p class="authorName"><span render-html="list.unickName"></span></p>
									<span class="comment-star" render-data-star="list.id">
                            <input type="hidden" name="star" class="star" render-value="list.id">
                            <i class="fa fa-star-o fa-lg" style="color: #DFE823" data-num="1"></i>
                            <i class="fa fa-star-o fa-lg" style="color: #DFE823" data-num="2"></i>
			                <i class="fa fa-star-o fa-lg" style="color: #DFE823" data-num="3"></i>
			                <i class="fa fa-star-o fa-lg" style="color: #DFE823" data-num="4"></i>
                            <i class="fa fa-star-o fa-lg" style="color: #DFE823" data-num="5"></i></span>

									<span class="comment-date" render-html="list.releaseTime"></span>
									<div class="comment-content">
										<a href="strategyComment.html" render-key="list.id" render-fun="handleStrategyComment">
											<p render-html="list.content"></p>
										</a>
									</div>

									<ul class="comment-img" render-loop="list.singlePic">
										<li>
											<img render-src="list.singlePic.pic">
										</li>
									</ul>
								</div>
							</div>

						</div>
					</div>

				</div>
				<div class="tab-pane fade" id="pills-contact">.3333..</div>
			</div>
		</div>

	

</body>

<script>
    var currentPage = 1; //当前页
    var pages; //总页数
    var comments;//点评
	var id=getParams().id;
	$(function () {

    //查所有的点评
    $.get("/comments",{currentPage:1,pageSize:2,userId:id},function (data) {
        $("#totalComment").html(data.total)
        console.log(data);
        comments=data.list;
        pages = data.pages;
        $("#comment").renderValues(data,{
            handleUserProfiles: function (ele, value) {
                ele.href = "/userProfiles.html?id="+value;
            },
            handleStrategyComment: function (ele, value) {
                ele.href = "/strategyComment.html?id=" + value;
            }
        });
        $.each(data.list,function (index,item) {
            //亮星星的
            for (var i = 1; i <= item.star; i++) {
                $("input[value=" + item.id + "]~i[data-num=" + i + "]").attr("class", "fa fa-star fa-lg")
            }
        })
    })
    //设置窗口的滚到事件
    $(window).scroll(function () {
        if (isEnd()) {
            if (currentPage < pages) {
                currentPage++;
                var args = {currentPage:currentPage,pageSize:2,userId:id};
                $.get("/comments", args, function (data) {
                    $("#totalComment").html(data.total)
                    //数据渲染
                    $.merge(comments, data.list);
                    $("#comment").renderValues({list:comments},{
                        handleUserProfiles: function (ele, value) {
                            ele.href = "/userProfiles.html?id="+value;
                        },
                        handleStrategyComment: function (ele, value) {
                            ele.href = "/strategyComment.html?id=" + value;
                        }
                    })
                    $.each(comments,function (index,item) {
                        //亮星星的
                        for (var i = 1; i <= item.star; i++) {
                            $("input[value=" + item.id + "]~i[data-num=" + i + "]").attr("class", "fa fa-star fa-lg")
                        }
                    })
                });
            } else {
                $(document).dialog({
                    type : "notice",
                    infoText: "已经到底部了",
                    autoClose: 1500,
                    position: "center"
                });
            }
        }
    });
	})
</script>
</html>